<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="background-color: blue; width: 0; height: 20px;"></div>
    <button>start</button>
    <script>
        let div = document.querySelector('div');
        let button = document.querySelector('button');
        let startTime;
        function progress(rafTime) {
            console.log('rafTime', rafTime)
            console.log('perNow', performance.now())
            div.style.width = div.offsetWidth + 1 + 'px';
            div.innerHTML = div.offsetWidth + '%';
            if (div.offsetWidth < 100) {
                console.log(Date.now() - startTime + 'ms');
                startTime = Date.now();
                requestAnimationFrame(progress)
            }
        }

        button.onclick = function () {
            div.style.width = 0;
            startTime = Date.now();
            // raf会在每次绘制前执行
            requestAnimationFrame(progress)
        }

    </script>
</body>

</html>